<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Welcome to the joyplus!</title>
    <link rel="shortcut icon" href="../../images/favicon.ico" th:href="@{/images/favicon.ico}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" media="screen" th:href="@{/css/bootstrap.min.css}"/>
    <link href="../static/css/jquery.jsonview.min.css" rel="stylesheet" media="screen" th:href="@{/css/jquery.jsonview.min.css}"/>
    <style>
        .li-content {
            list-style-type:none;
            display: none;
            background-color: #ccdde4;
            padding: 0.5em;
            border-style: solid;
            border-color: #000000;
            margin-right: 0.5em;
        }

        .bd-navbar {
            position: sticky;
            top: 0;
            z-index: 1071;
            color: white;
            background-color:#428bca;
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
        }
    </style>
</head>
<body>
<header class="navbar  flex-column flex-md-row bd-navbar">
    <div class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">Hi, Joypluser!</div>
    <div class="navbar-nav flex-row ml-md-auto d-none d-md-flex"></div>
    <a href="login" class="d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" th:unless="${#authorization.expression('isAuthenticated()')}">
        <small style="color: white">Login</small>
    </a>
    <div class="d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" sec:authorize="isAuthenticated()">
        <small>
            Logged user: <span sec:authentication="name">Bob</span> |</small>
        <form th:action="@{/logout}" method="post"  style="display:inline">
            <a href="#"  onclick="$('form').submit()"><small>Logout</small></a>
        </form>

    </div>
</header>
<ul>
    <li><a href="public/demo" target="_blank">Wechat Js Sdk Demo</a></li>
    <li sec:authorize="hasRole('ADMIN')"><a href="#" onclick="showAccessToken()">查看当前Access Token</a></li>
    <li id="accessToken" class="li-content accesstoken"></li>
    <li sec:authorize="hasRole('ADMIN')"><a href="#"  onclick="showMenuConfig()">获取当前自定义菜单配置</a></li>
    <li id="menuJsonView" class="li-content"></li>
    <li sec:authorize="hasRole('ADMIN')">修改自定义菜单配置（TODO）</li>
</ul>

<script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="../static/js/tether.min.js" th:src="@{/js/tether.min.js}"></script>
<script type="text/javascript" src="../static/js/jquery.jsonview.min.js" th:src="@{/js/jquery.jsonview.min.js}"></script>
<script type="text/javascript" src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script>
    function showLoading(isShow) {
        $("body").css("cursor",isShow?"wait":"default");
    }
    function showAccessToken() {
        showLoading(true);
        $("#accessToken").load("wxapi/get-accesstoken",function () {
            $("#accessToken").show();
            showLoading(false);
        })
    }

    function showMenuConfig() {
        showLoading(true);
        $.getJSON("wxapi/call-get-api?code=getMenu",function (json) {
            $('#menuJsonView').show().JSONView(json);
            showLoading(false);
        })
    }
</script>
</body>

</html>